<template>
  <div class="success  all-bj1 " id="success_info">
    <div class="header">
      <div class="header-title">
        <p>根据您的选项为您推荐以下酒款</p>
      </div>
    </div>
    <div class="content">
      <div class="info" v-for="(item,key) in dataList" :key="key" @click="purchaseGoods(item.buy_url,item.wine_id)">
        <div class="info_list" >
          <div class="info-top">
            <div class="info-l">
              <div><img :src="item.pic_url " alt=""></div>
            </div>
            <div class="info-r">
              <p class='title'><span class="title-info">{{item.name_ch}}</span></p>
              <p class="status">产地：<span>{{item.country_ch}}</span> <span>{{item.region_ch}}</span></p>
              <p class="status">类型：<span>{{item.wine_type_ch}}</span></p>
              <p class="status" v-if="JSON.stringify(item.grapes) !== '{}'">葡萄品种：<span :key="key3" v-for="(grapes,key3) in item.grapes">{{grapes.grape_ch}} </span></p>
              <p class="fraction"><span>{{item.good_count}}</span>条好评 <span>{{Math.floor(item.good_rate *100)}}</span>%好评率</p>
              <p><span class="label" :class="{selfOperated: tags === '自营'}" :key="key1" v-for="(tags,key1) in item.buy_sub_tags">{{tags}}</span></p>
              <strong>{{item.price}}</strong>
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="info-bottom">
            <p v-show="JSON.stringify(item.awards) !== '{}'  && item.awards[item.year] "><i class="iconfont icon-winning"></i><span :key="key4" v-for="(v,key4) in item.awards[item.year]">{{v.award_ch}}※{{v.award_level_ch}}</span></p>
            <p v-show="JSON.stringify(item.score) !== '{}' && item.score[item.year] "><i class="iconfont  icon-defen"></i><span v-for="(v1,key2) in item.score[item.year] " :key="key2" >{{item.year}} {{key2}} {{v1}}</span></p>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-prompt"><p>温馨提示：直接点击酒款可立即购买哦</p></div>
      <div class="btn">
        <a @click="getData" class="cove" v-if="allData.length > 6" href="#success_info"><img src="../../assets/img/match_list_slices/btn_change@2x.png" alt=""></a>
        <a @click="reAnswer" class="cove"   v-if="allData.length <= 6"><img src="../../assets/img/button_status/btn_again@2x.png" alt=""></a>
        <a  class="renew" @click="reAnswer" v-if="allData.length > 6">重新答题</a>
      </div>
      <div class="message">
        <p>没有找到合适的酒款？<a @click="recommend">点击查看更多人气推荐</a></p>
      </div>
      <div class="bottom_bj">
        <p>活动说明："酒咔嚓"仅做推荐，不参与购买环节，所有购买均在第三方电商平台上进行。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: [],
      num: 0,
      page: 1,
      limit: 6,
      img_url: require('../../assets/img/match_list_slices/btn_change@2x.png'),
      allData: [],
      locationData: ''
    }
  },
  mounted () {
    this.getData()
    this.location()
  },
  methods: {
    getUrlParam (name, url) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      var r = url.substr(1).match(reg)
      if (r != null) return unescape(r[2])
      return ''
    },
    location () {
      const that = this
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          function (position) {
            var longitude = position.coords.longitude
            var latitude = position.coords.latitude
            const str = longitude + ',' + latitude
            that.locationData = str
          },
          function (e) {
            var msg = e.code
            var dd = e.message
            console.log(msg)
            console.log(dd)
          }
        )
      }
    },
    purchaseGoods (url, wineId) {
      const arr = []
      const that = this
      that.dataList.forEach(item => {
        if (item.wine_id === wineId) {
          arr.wine_id = item.wine_id
          arr.year = item.year
          arr.query_column = item.buy_url
        }
      })
      const logs = {
        'module': '活动',
        'sub_module': '京东智能选酒',
        'op_event': '点击购买',
        'wine_id': arr.wine_id,
        'year': arr.year,
        'query_column': arr.query_column,
        'source': this.getUrlParam('source', url),
        'useragent': navigator.userAgent,
        'geo_location': that.locationData
      }
      const params = JSON.stringify(logs)
      const logsUrl = `${location.protocol}//recomm.9kacha.com/record_log.php`
      that.$ajax.post(logsUrl, params).then(res => {
        console.log(res)
        window.location.href = url
      }, err => {
        console.log(err)
        window.location.href = url
      })
      setTimeout(function () {
        window.location.href = url
      }, 2000)
    },
    getStart () {
      return (this.page - 1) * this.limit
    },
    getEnd () {
      return ((this.page - 1) * this.limit) + this.limit
    },
    getData () {
      const that = this
      that.logs('换一批')
      that.allData = JSON.parse(sessionStorage.getItem('data'))
      let data = that.allData.slice(that.getStart(), that.getEnd())
      if (data.length !== 0) {
        // 页码添加
        that.dataList = data
        that.page = that.page + 1
      } else {
        // // 数据不存在
        that.page = 1
        that.getData()
      }
    },
    logs (opEvent) {
      const that = this
      const logs = {
        'module': '活动',
        'sub_module': '京东智能选酒',
        'op_event': opEvent,
        'query_column': location.href,
        'source': this.getUrlParam('source', location.href),
        'useragent': navigator.userAgent,
        'geo_location': that.locationData
      }
      const params = JSON.stringify(logs)
      const logsUrl = `${location.protocol}//recomm.9kacha.com/record_log.php`
      this.$ajax.post(logsUrl, params).then(res => {
        console.log(res)
      }, err => {
        console.log(err)
      })
    },
    reAnswer () {
      this.logs('有结果的重新答题')
      sessionStorage.removeItem('options')
      this.$router.push('/Topic_1')
    },
    recommend () {
      this.logs('更多人气推荐')
      window.location.href = 'https://so.m.jd.com/ware/search.action?keyword=%E8%91%A1%E8%90%84%E9%85%92+ %E9%85%92&catelogyList='
    }
  }
}
</script>

<style scoped lang="less">
  @import "../../lib/less/variable.less";
.success{
  width: 100%;
  .header{
    .header-title{
      text-align: center;
      width: 100%;
      .pt(23);
      .pb(20);
      p{
        .fs(15);
        font-weight: bold;
        color: #fff;
        font-family:PingFangSC-Semibold;

      }
    }
  }
  .content{
    width: 100%;
    margin: 0 auto;
    .info{
      .padding(0,25);
      .info_list{
        background: #fff;
        width: 100%;
        border-radius: 8px;
        .info-top{
          width: 100%;
          .padding(7,7);
          .info-l{
            .w(74);
            .h(104);
            div{
              .w(74);
              .h(104);
              text-align: center;
              img{
                .w(74);
                .h(104);
                object-fit: cover;
              }
            }
            float: left;
          }
          .info-r{
            width: 64.27%;
            box-sizing: border-box;
            float: left;
            color: #333;
            position: relative;
            .ml(7);
            p{
              span{
                vertical-align: top;
              }
            }
            .title{
              .store{
                color: #FF2C2C;
                display: inline-block;
                .w(36);
                .h(11);
                .lh(11);
                text-align: center;
                /*border: 2px solid #FF2C2C;;*/
                vertical-align:  initial;
                background: url("../../assets/img/match_list_slices/tag_JDmarket@2x.png") no-repeat center center ;
                background-size:contain;
              }
              .title-info{
                .fs(12);
                word-break:normal;
                white-space:pre-wrap;
                word-wrapL:break-word;
                overflow: hidden;
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;

              }

            }
            .status{
              color: #999999;
              .fs(12);
              /*控制标签文字一行显示*/
              display: block; /*内联对象需加*/
              word-break: keep-all; /* 不换行 */
              white-space: nowrap; /* 不换行 */
              overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
              text-overflow: ellipsis; /*溢出时显示省略标记...；需与overflow:hidden;一起使用*/

            }
            .fraction{
              color: #bbb;
            }
            .label{
              display: inline-block;
              .h(16);
              .lh(15);
              .padding(0,2);
              .mt(2);
              border-radius: 5px;
              text-align: center;
              color: #FF3131;
              border: 2px solid #FF2C2C;
              .ml(3)
            }
            .selfOperated{
              background: #FF6C6C;
              color: #fff;
              border: none;
              .lh(16);
            }
            strong{
              position: absolute;
              .right(-30);
              .top(65);
              font-weight: bold;
              .fs(16);
              z-index: 100;
              font-family:PingFangSC-Medium;
              color: #F31B43;
            }
            strong:before{
              content:'￥'
            }
          }
        }
        .info-bottom {
          width: 100%;
          .pl(10);
          .pr(10);
          .mb(10);
          span{
            .mr(3);
            display: inline-block;
            .pb(4);
          }
          .icon-winning{
            .fs(15);
            color: #cc3333;
          }
          i{
            font-style:normal;
          }
          .icon-defen{
            .w(11);
            .h(11);
            display: inline-block;
            background: url("../../assets/img/button_status/ic_gaofen@2x.png") no-repeat center center;
            background-size: contain;
            .mr(5);
          }
          p{
            color: #333;
            .mt(1);
            .h(30);
            .lh(26);
            .fs(13);
            /*控制标签文字一行显示*/
            display: block; /*内联对象需加*/
            word-break: keep-all; /* 不换行 */
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow: ellipsis; /*溢出时显示省略标记...；需与overflow:hidden;一起使用*/
            border-top: 1px solid #ccc;
          }
        }
      }

    }
}
  .footer{
    width: 100%;
    box-sizing: border-box;
  .footer-prompt{
    width: 100%;
  .padding(0,25);
    text-align: right;
    .fs(12);
    color: #fff;
  }
    .btn{
      position: relative;
      text-align: center;
      .pt(20);
      .cove{
        width: 32%;
        display: inline-block;
        img{
          width: 100%;
          object-fit: cover;
        }
      }
      .renew{
        color: #fff;
        .fs(16);
        .pt(10);
        display:block;
       text-decoration: underline;
      }
      p{
        color:#fff;
        .pt(10);
        .pb(30)
      }
    }
    .message{
      .pl(40);
      .pr(40);
      .pt(20);
      .pb(30);
      p{
        .fs(14);
        color: #fff;
        a{
          text-decoration:underline;
          color: #ffffff;
          .ml(5);
        }
      }
    }
    .bottom_bj{
      width: 100%;
      .h(168);
      background: url("../../assets/img/Q1_slices/bottomimage_Q1@2x.png")no-repeat bottom center;
      background-size: contain;
      position: relative;
     p{
        .fs(12);
        color: #fff;
        position: absolute;
        .padding(0,25);
        .bottom(15);
        .left(0);
      }
    }
  }

}
</style>
